<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Email Assistant</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .chat-container {
            height: 500px;
            overflow-y: auto;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            margin-bottom: 10px;
        }
        .user-message {
            background-color: #e3f2fd;
            padding: 8px 12px;
            border-radius: 15px;
            margin: 5px 0;
            max-width: 80%;
            align-self: flex-end;
            margin-left: auto;
        }
        .ai-message {
            background-color: #f1f1f1;
            padding: 8px 12px;
            border-radius: 15px;
            margin: 5px 0;
            max-width: 80%;
        }
        .message-container {
            display: flex;
            flex-direction: column;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h1 class="mb-4">AI Email Assistant</h1>
        <p class="lead">Chat with the AI to send emails, check email service status, or configure the email service.</p>
        
        <div class="chat-container" id="chatContainer">
            <div class="message-container">
                <div class="ai-message">
                    Hello! I'm your AI email assistant. I can help you send emails, check the email service status, or configure the email service. How can I assist you today?
                </div>
            </div>
        </div>
        
        <div class="input-group mb-3">
            <input type="text" class="form-control" id="messageInput" placeholder="Type your message here...">
            <button class="btn btn-primary" id="sendButton">Send</button>
        </div>
        
        <div class="card mt-4">
            <div class="card-header">
                Example Commands
            </div>
            <div class="card-body">
                <ul>
                    <li>"What is the current status of the email service?"</li>
                    <li>"Send an email to [email] with subject [subject] and content [content]"</li>
                    <li>"Configure the email service to use [host] with port [port]"</li>
                </ul>
            </div>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const chatContainer = document.getElementById('chatContainer');
            const messageInput = document.getElementById('messageInput');
            const sendButton = document.getElementById('sendButton');
            
            function addMessage(message, isUser) {
                const messageContainer = document.createElement('div');
                messageContainer.className = 'message-container';
                
                const messageDiv = document.createElement('div');
                messageDiv.className = isUser ? 'user-message' : 'ai-message';
                messageDiv.textContent = message;
                
                messageContainer.appendChild(messageDiv);
                chatContainer.appendChild(messageContainer);
                
                // Scroll to bottom
                chatContainer.scrollTop = chatContainer.scrollHeight;
            }
            
            function sendMessage() {
                const message = messageInput.value.trim();
                if (message === '') return;
                
                // Add user message to chat
                addMessage(message, true);
                messageInput.value = '';
                
                // Send to backend
                fetch('/api/ai/chat', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ message: message })
                })
                .then(response => response.json())
                .then(data => {
                    // Add AI response to chat
                    addMessage(data.response, false);
                })
                .catch(error => {
                    console.error('Error:', error);
                    addMessage('Sorry, there was an error processing your request.', false);
                });
            }
            
            sendButton.addEventListener('click', sendMessage);
            
            messageInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    sendMessage();
                }
            });
        });
    </script>
</body>
</html>
